<template>
  <div id="stuScoreCharts">
    <globle-linear-border>
      <select-header @on-init-exam-en-name="onInitExamEnName" @on-option-click="onOptionClick"></select-header>
    </globle-linear-border>

    <div class="main-box">
      <section>
        <globle-linear-border class="left-box">
          <score-display v-if="chartData" id="maxMinAve" :data="chartData"></score-display>
        </globle-linear-border>
        <globle-linear-border class="left-box">
          <div id="passRate"></div>
        </globle-linear-border>
        <globle-linear-border class="left-box">
          <div id="goodRate"></div>
        </globle-linear-border>
      </section>
      <main>
        <globle-linear-border class="center-box">
          <div id="scoreScale"></div>
        </globle-linear-border>
        <globle-linear-border class="center-box">
          <div id="scoreCounter"></div>
        </globle-linear-border>
      </main>
      <section>
        <globle-linear-border class="right-box">
          <personal-rank v-if="chartData" id="personalRank" :data="chartData"></personal-rank>
        </globle-linear-border>
      </section>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref } from 'vue';
import echarts from '../../../../echarts';
import { useAPI } from '../../../../request/api';
import { useUserStore } from '../../../../store/user';
import { APIData, IExamScoreChart, IExamScoreChartParams, IThemeColor, IExam } from '../../../../type/index';
import { initScoreScale } from './chartsInit/ScoreScale';
import { initScoreCounter } from './chartsInit/scoreCounter';
import { initGoodRate } from './chartsInit/goodRate';
import { initPassRate } from './chartsInit/passRate';
import { useThemeStore } from '../../../../store/theme';
import SelectHeader from './components/SelectHeader.vue';
import ScoreDisplay from './components/ScoreDisplay.vue';
import PersonalRank from './components/PersonalRank.vue';
import { ElMessage } from 'element-plus';
const api = useAPI();
const store = useUserStore();
const themeStore = useThemeStore();

const currentExamEnName = ref<string>('');
const chartData = ref<IExamScoreChart>();
const themeColor = ref<IThemeColor>(themeStore.currentThemeColor);
const isCloseMenu = ref<boolean>(themeStore.isColseMenu);
let currentStage = store.currentStage;

// store.$subscribe(async (args, states) => {
//   if (currentStage != states.currentStage) {
//     currentStage = states.currentStage;
//     disposeAllCharts(); //销毁之前的实例
//     const flag = await getChartData();
//     if (flag) initAllCharts();
//   }
// });

themeStore.$subscribe((args, states) => {
  if (themeColor.value.font != states.currentThemeColor.font) {
    themeColor.value = states.currentThemeColor;
    disposeAllCharts(); //销毁之前的实例
    initAllCharts(); //重新创建
  }

  if (isCloseMenu.value != states.isColseMenu) {
    isCloseMenu.value = states.isColseMenu;

    setTimeout(() => {
      disposeAllCharts(); //销毁之前的实例
      initAllCharts(); //重新创建
    }, 300);
  }
});

onMounted(async () => {
  const flag = await getChartData();
  if (flag) initAllCharts();
});

const onInitExamEnName = (examList: IExam[]) => {
  currentExamEnName.value = examList[0].enName;
};

const onOptionClick = async (item: IExam) => {
  currentExamEnName.value = item.enName;
  disposeAllCharts(); //销毁之前的实例
  const flag = await getChartData();
  if (flag) initAllCharts();
};

const initAllCharts = () => {
  const data = chartData.value;
  if (!data) {
    initAllCharts();
    return;
  }

  initScoreScale(echarts, document.querySelector('#scoreScale') as HTMLElement, data.lineYAxis, data.lineXAxis, themeColor.value);
  initScoreCounter(echarts, document.querySelector('#scoreCounter') as HTMLElement, data.lineYAxis, data.lineXAxis, themeColor.value);
  initGoodRate(echarts, document.querySelector('#goodRate') as HTMLElement, data.goodRate, themeColor.value);
  initPassRate(echarts, document.querySelector('#passRate') as HTMLElement, data.passRate, themeColor.value);
};

const disposeAllCharts = () => {
  echarts.dispose(document.querySelector('#scoreScale') as HTMLElement);
  echarts.dispose(document.querySelector('#scoreCounter') as HTMLElement);
  echarts.dispose(document.querySelector('#goodRate') as HTMLElement);
  echarts.dispose(document.querySelector('#passRate') as HTMLElement);
};

onBeforeUnmount(() => {
  disposeAllCharts();
});

const getChartData = async () => {
  const params: IExamScoreChartParams = { stage: store.currentStage, department: store.currentDepartment, examName: currentExamEnName.value };
  const res: APIData = await api.getChartData(params, store.role, 'examScore');
  let flag = false;
  if (res.code === 200 && res.data.personalRank.length !== 0) {
    chartData.value = res.data;
    flag = true;
  } else if (res.code === 200 && res.data.personalRank.length === 0) ElMessage.error('该期数暂无学生分数数据');
  else ElMessage.error(res.message);
  return flag;
};
</script>

<style lang="scss" scoped>
#stuScoreCharts {
  height: 100%;

  .main-box {
    padding-top: 16px;
    height: calc(98% - 60px);
    display: flex;
    justify-content: space-between;
    // border: 2px solid red;

    main {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // border: 2px solid red;

      .center-box {
        height: 48%;
        #scoreScale,
        #scoreCounter {
          height: 100%;
        }
      }
    }

    section {
      width: 23%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .left-box {
        height: 32%;
        #maxMinAve,
        #passRate,
        #goodRate {
          height: 100%;
        }
      }
      .right-box {
        height: 100%;
        #personalRank {
          width: 100%;
          // height: 100%;
        }
      }
    }
  }
}
</style>
